import React, { useEffect, useState } from 'react';
import { Button , Table ,Tag ,Drawer,Form,Input,Select,Tree, notification } from 'antd';
import { PlusOutlined  } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table';
import _ from 'lodash'//lodash是一个常用工具函数集合库
import type { DataNode } from 'antd/es/tree';
import service from '../../../api'
import './admin.scss'

interface Props {}

interface DataType {
    key: string;
    adminnane : string;
    role: number;
    adminid: string,
    checkedKeys:string[]
    }

function Admin( props:Props ) {

    var [adminlist,setAdminlist] = useState([])
    var [pagination,setPagination] = useState({current:0,pageSize:0})
    var [open,setOpen] = useState(false)
    var [checkedKeys,setCheckedKeys] =useState([])
    var [adminid,setAdminid] =useState(' ')
    const [form] = Form.useForm()

    // 请求管理员数据
    var request_admin_list = async () =>{
        var res = await service.admin.admin_list()
        console.log(res.data);
        if(res.data.code == 200) {
            setAdminlist(res.data.data)
        }
    }

    useEffect(()=>{
        request_admin_list()
    },[])

    // 添加管理员
    var toAdminAdd=()=>{
        setOpen(true)
    }

    // 修改管理员信息
    var handleEdit =(values:any)=>{
        // 弹出抽屉
        setOpen(true)
        // 回显表单数据 
        form.setFieldsValue(values) 
        // 设置checkedKeys的值
        setCheckedKeys(values.checkedKeys)
        // 保存adminid 
        setAdminid( values.adminid)
    }
    
    // 删除管理员
    var handleDelete =async(adminid:any)=>{
        var res = await service.admin.admin_delete({adminid})
        console.log(res.data);
        notification.destroy()  
        if( res.data.code == 200){
            notification.success({message:'管理员删除成功'})
            var res = await service.admin.admin_list()
            setAdminlist(res.data.data)
        }
    }

    // 分页时执行
    var onPageChange =( pagination:any)=>{ 
        setPagination(pagination)
    }

    // 表单验证通过执行
    var onFinish =async(values:any)=>{
        // console.log(values);
        if(adminid){
            var res = await service.admin.admin_update(values)
            if( res.data.code == 200){
                notification.success({message:'编辑管理员成功'})
                setOpen(false)
                var res = await service.admin.admin_list()
                setAdminlist(res.data.data)
            }
        }else{
            var res = await service.admin.admin_add(values)
            if( res.data.code == 200){
                notification.success({message:'新增管理员成功'})
                var res = await service.admin.admin_list()
                setAdminlist(res.data.data)
                setOpen(false)
            }
        }
    } 

    // 关闭抽屉时执行
    var onClose =() =>{
        setAdminid('')
        form.setFieldsValue({adminname:'',password:'',role:null,checkedKeys:[]})
        setCheckedKeys([])
        setOpen(false)
        
    }

    // 树形控件中的选择发生改变
    const onCheck = (checkedKeysValue:any) => {
        // 保存选中的权限
        setCheckedKeys(checkedKeysValue)   
        // 保存选中的权限到form组件中的CheckedKeys属性中
        form.setFieldValue('checkedKeys',checkedKeysValue)
    };

    // 表格列的配置项 
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            align: 'center',
            key: '1',
            render: (_,record,index) => <div>{ (pagination.current-1) * pagination.pageSize +  index+1 }</div>
        },
        {
            title: '账号 ',
            align: 'center',
            key: '2',
            dataIndex:'adminname'
        },
        {
            title: '权限',
            align: 'center',
            key: '3',
            render:(_,record,index)=><Tag color='#87d068'>{record.role == 1 ? '管理员' :'超级管理员'}</Tag>
        },
        {  
            title: '操作',
            align: 'center',
            key: '4',
            render: (_,record,index) => <>
                <Button type="primary"  onClick={()=>{ handleEdit(record)}} style={{marginRight:15}}> Edit </Button>
                <Button type="primary" danger onClick={()=>{ handleDelete(record.adminid)}}> Delete </Button>
            </>
            
        },
    ]

    // 树形控件数据源
    const treeData: DataNode[] = [
        {
            title: '轮播图管理',
            key: '1',
            children: [
                { title: '轮播图列表', key: '1-1' },
            ],
            },
            {
            title: '账号管理',
            key: '2',
            children: [
                { title: '管理员列表', key: '2-1' },
            ],
            },
            {
            title: '产品管理',
            key: '3',
            children: [
                { title: '产品列表', key: '3-1' },
                { title: '秒杀列表', key: '3-2' },
                { title: '推荐列表', key: '3-3' },
                { title: '筛选列表', key: '3-4' }, 
            ],
            },
            {
            title: '数据可视化',
            key: '4',
            children: [
                { title: 'echarts使用', key: '4-1' },
            ],
            },
            {
            title: '编辑器',
            key: '5',
            children: [
                { title: '富文本编辑器', key: '5-1' },
            ],
            },
            {
            title: 'excel管理',
            key: '6',
            children: [
                { title: 'excel导入', key: '6-1' },
                { title: 'excel导出', key: '6-2' },
            ],
            },
            {
            title: '地图管理',
            key: '7',
            children: [
                { title: '百度地图', key: '7-2' },

            ],
            },
        ];

    return (
        <div className='admin'>
            <Button type="primary" onClick={()=>{toAdminAdd()}}>添加管理员<PlusOutlined style={{fontSize:14 , color: '#fff'}}/></Button>
            <Table onChange={onPageChange} className='table' columns={columns}  dataSource={adminlist}/>
            <Drawer title={adminid ? '编辑管理员' : '新增管理员'} placement="right" onClose={onClose} open={open}>
                <Form
                    form={form}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                    label="账号"
                    name="adminname"
                    rules={[{ required: true, message: '请输账号' }]}
                    >
                        <Input disabled={adminid != ''}/>
                    </Form.Item>

                    <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input type='password' disabled={adminid != ''}/> 
                    </Form.Item>

                    <Form.Item
                    label="角色"
                    name="role"
                    rules={[{ required: true, message: '请选择角色' }]}
                    >
                        <Select
                            options={[
                                { value: 1, label: '管理员' },
                                { value: 2, label: '超级管理员' },
                            ]}
                            />
                    </Form.Item>

                    <Form.Item
                    label="权限"
                    name="checkedKeys"
                    rules={[{ required: true, message: '请选择权限' }]}
                    >
                        <Tree
                            checkable
                            onCheck={onCheck}
                            checkedKeys={checkedKeys}
                            treeData={treeData}
                            />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                        <Button type="primary" htmlType="submit">
                            {adminid ? '编辑管理员' : '新增管理员'}
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>

        </div>
    );
}

export default Admin;